<template>
  <div class="geek">
    <div class="tools">
      <span>文件(F)</span>
      <span>操作(A)</span>
      <span>查看(V)</span>
      <span>帮助(H)</span>
    </div>
    <table>
      <thead>
        <tr>
          <th class="name">程序名称</th>
          <th>大小</th>
          <th>安装时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td class="name">
            <img :src="getImageUrl(`app/${item.icon.trim()}.png`)" alt="app" />
            <span>{{ item.name }}</span>
          </td>
          <td>{{ $sizeFormat(item.appSize) }}</td>
          <td>{{ $dateFormat('YYYY/MM/DD', item.createTime) }}</td>
          <td>
            <div class="uninstall">卸载</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { useDeskAppStore } from '@/stores/systemApp/deskApp'
import { getImageUrl } from '@/utils/utils'
import { computed } from 'vue'

const deskAppStore = useDeskAppStore()

const list = computed(() => deskAppStore.$state.deskAppList.filter((item) => item.appId === item.icon))
</script>

<style scoped lang="scss">
.geek {
  width: 100%;
  height: 100%;
  background-color: rgb(32, 32, 32);
  position: relative;

  .tools {
    height: 28px;
    line-height: 28px;
    color: #fff;
    border-bottom: 1px solid rgb(67, 67, 67);
    background-color: rgb(32, 32, 32);

    > span {
      display: inline-block;
      padding: 0 10px;
    }
  }

  table {
    color: #fff;
    width: 100%;
    max-height: 100%;
    text-align: center;

    tbody {
      tr {
        &:hover {
          background-color: rgb(119, 119, 119);
        }
      }
    }

    tr {
      height: 24px;

      &:nth-of-type(2n) {
        background-color: rgb(41, 41, 41);
      }

      td,
      th {
        height: 24px;
        white-space: nowrap;
        overflow: hidden;

        &.name {
          text-align: left;
          padding-left: 24px;
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
            width: 18px;
            height: 18px;
            object-fit: contain;
          }
        }

        .uninstall {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
